<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>NICE音乐盒</title>
	<link rel="stylesheet" href="css\index.css">
	<link rel="stylesheet" href="css\gif.css">
</head>
<body>
	<div class="top1">
		<div class="top2">
			<h1>NICE音乐盒</h1>
			<ul id="one">
				<li>发现音乐</li>
				<li class="music">我的音乐</li>
				<li>关注</li>
				<li>商城</li>
				<li>音乐人</li>
				<li>下载客户端</li>
			</ul>
			<div class="login">登录</div>
			<a href="" class="creator">创作者中心</a>
			<div class="search">
				<input type="text">
				<label>音乐/视频/电台/用户</label>
			</div>
		</div>
	</div>
	<div class="navigation">
		<div class="red">
			<ul>
				<li><em>推荐</em></li>
				<li><em>排行榜</em></li>
				<li><em>歌单</em></li>
				<li><em>主播电台</em></li>
				<li><em>歌手</em></li>
				<li><em>新碟上架</em></li>
			</ul>
		</div>
	</div>
	<div class="slideshow">
		<div class="image">
		<div class="container">
		<ul>
		    <li><img src="img\one.jpg" alt=""></li>
		    <li><img src="img\two.jpg" alt=""></li>
		    <li><img src="img\three.jpg" alt=""></li>
			<li><img src="img\four.jpg" alt=""></li>
		</ul>
		</div>
            <div class="download"><img src="img\five.png" alt=""></div>
            <div class="dots">
            	<a href=""><img src="img\six.png" alt=""></a>
            	<a href=""><img src="img\six.png" alt=""></a>
            	<a href=""><img src="img\six.png" alt=""></a>
            	<a href=""><img src="img\six.png" alt=""></a>
            </div>
            <a href="" class="leftbtn"><img src="img/left.png" alt=""></a>
            <a href="" class="rightbtn"><img src="img/right.png" alt=""></a>
		</div>
	</div>
	<div class="page">
		<div class="mpage">
			<div class="lpage">
				<div class="hot">
					<a href="" class="tuijian">热门推荐</a>
					<div class="kind">
						<a href="">华语</a><span>|</span>
						<a href="">流行</a><span>|</span>
						<a href="">摇滚</a><span>|</span>
						<a href="">民谣</a><span>|</span>
						<a href="">电子</a><span>|</span>
					</div>
					<a href=""><span class="more">更多</span></a>
				</div>
				<ul class="song" style="overflow: hidden;">
					<li class="zhe">
						<div class="cover">
							<img src="img\cover1.jpg" alt="">
						</div>
						<p>承认做不到和说谎有什么区别</p>
					</li>
					<li class="zhe">
						<div class="cover">
							<img src="img\cover2.jpg" alt="">
						</div>
						<p>如果再给我一次机会你还会选择走吗
						</p>
					</li>
					<li class="zhe">
						<div class="cover">
							<img src="img\cover3.jpg" alt="">
						</div>
						<p>你费尽心思错过我 是为了遇见谁
						</p>
					</li>
					<li class="zhe">
						<div class="cover">
							<img src="img\cover4.jpg" alt="">
						</div>
						<p>听完这首歌，就把你忘记了</p>
					</li>
					<li class="che">
						<div class="cover">
							<img src="img\cover5.jpg" alt="">
						</div>
						<p>没有了爱，你的世界会是什么颜...</p>
					</li>
					<li class="che">
						<div class="cover">
							<img src="img\cover6.jpg" alt="">
						</div>
						<p><a href="video.html">好听到单曲循环鸭</a></p>
					</li>
					<li class="che">
						<div class="cover">
							<img src="img\cover7.jpg" alt="">
						</div>
						<p>KTV必点：有没有一首歌，唱...
						</p>
					</li>
					<li class="che">
						<div class="cover">
							<img src="img\cover8.jpg" alt="">
						</div>
						<p>2022NICE音乐盒超好听的热门流行歌曲</p>
					</li>
				</ul>
				<div class="hot">
					<a href="" class="tuijian">新碟上架
					</a>
					<a href=""><span class="more">更多</span></a>
				</div>
				<div class="lunbo">
					<a href="" class="leftbtn"><img src="img/left.png" alt=""></a>
					<div class="roll">
						<ul>
							<li><img src="img\img1.jpg" alt="">
							<p class="song-name"><a href=""><em>经典(Live)</em></a></p>
							<p class="songer-name"><a href="">张学友</a></p>
							</li>
							<li><img src="img\img2.jpg" alt="">
							<p class="song-name"><a href=""><em>异界来客</em></a></p>
							<p class="songer-name"><a href="">幼稚园杀手</a></p>
							</li>
							<li><img src="img\img3.jpg" alt="">
							<p class="song-name"><a href=""><em>对等关系</em></a></p>
							<p class="songer-name"><a href="">李荣浩/张惠妹</a></p>
							</li>
							<li><img src="img\img4.jpg" alt="">
							<p class="song-name" id="gm" style="font-size: 12px;margin-top: 4px;"><em>孤勇者</em></p>
							<p class="songer-name" id="gs"><a href="">陈奕迅</a></p>
							<audio id="player4">
                                 <source src="D:\QQMusic\gyz.mp3"></source>
                            </audio>
							</li>
							<li><img src="img\img5.jpg" alt="">
							<p class="song-name"><a href=""><em>许光汉</em></a></p>
							<p class="songer-name"><a href="">许光汉</a></p>
							</li>
						</ul>
					</div>
					<a href="" class="rightbtn"><img src="img/right.png" alt=""></a>
				</div>
				<div class="hot">
					<a href="" class="bangdan">榜单</a>
					<a href=""><span class="more">更多</span></a>
				</div>
			</div>
			<div class="rpage">
				<div class="user">
					<p>登录NICE音乐盒，可以享受无限收藏的乐趣，并且无限同步到手机</p>
					<a href="" class="login1">用户登录</a>
				</div>
				<div class="rzsinger">
					<h3>
					<span class="singer">入驻歌手</span>
					<a href="" class="all" style="float: right;">查看全部</a>
					</h3>
					<ul style="margin: -9px 0 14px 20px;overflow: hidden;">
						<li>
							<a href="nice">
								<div class="head"><img src="img\singer1.jpg" alt="">
								</div>
								<div class="mid">
									<h4><span class="name">薛之谦</span></h4>
									<p class="name1">音乐制作人</p>
								</div>
							</a>
						</li>
						<li>
							<a href="nice">
								<div class="head"><img src="img\singer2.jpg" alt="">
								</div>
								<div class="mid">
									<h4><span class="name">许嵩</span></h4>
									<p class="name1">创作歌手</p>
								</div>
							</a>
						</li>
						<li>
							<a href="nice">
								<div class="head"><img src="img\singer3.jpg" alt="">
								</div>
								<div class="mid">
									<h4><span class="name">陈奕迅</span></h4>
									<p class="name1">华语流行歌手</p>
								</div>
							</a>
						</li>
						<li>
							<a href="nice">
								<div class="head"><img src="img\singer4.jpg" alt="">
								</div>
								<div class="mid">
									<h4><span class="name">林俊杰</span></h4>
									<p class="name1">新加坡歌手</p>
								</div>
							</a>
						</li>
						<li>
							<a href="nice">
								<div class="head"><img src="img\singer5.jpg" alt="">
								</div>
								<div class="mid">
									<h4><span class="name">颜人中</span></h4>
									<p class="name1">创作歌手</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="last"></div>
</body>
<script type="text/javascript">
    document.getElementById('gm').onclick = function(){
        player4.play();
    }
    document.getElementById('gs').onclick = function(){
        player4.pause();
    }
</script>
</html>